<template>

    <div>
        <Top>
            <p  class="content">搜索</p>
        </Top>
        <van-field v-model="sms" center clearable size="10px" placeholder="请输入商家或美食名称">
            <template #button>
                <van-button size="small" type="info" @click="get('v','t')">提交</van-button>
            </template>
        </van-field>
        <div class="two" v-if="msg">
            <p class="p1">搜索历史</p>
            <div>
                <p v-for="(v,i) in history" class="lishi" :key="i"> <span @click="get(v,'l')" id="LS">{{v}}</span>  <span class="span" @click="delete1(i)"><van-icon name="cross" /></span></p>
            </div>
        </div>
        <div v-else-if="wu" class="wu">
            很抱歉!无搜索结果
        </div>
        <div class="one" v-else>
            <p class="p1">商家</p>
            <div v-for="(v, i) in show" :key="i" class="shop-root-book" @click="shop(v)">
                <div class="shop-left">
                    <img data-v-2df9c5b6="" :src="'//elm.cangdu.org/img/'+v.image_path" class="shop_img"/>
                </div>
                <div class="shop-right">
                    <div class="shop-right-one">
                        <h4>{{ v.name }}</h4><span>支付</span>
                    </div>
                    <div class="shop-right-two">
                        <span>月销售{{ v.recent_order_num }}单</span>
                    </div>
                    <div class="shop-right-shtte">
            <span>{{ v.float_minimum_order_amount }}元起送</span><span>{{ v.distance }}</span>
                    </div>
                </div>
            </div>

        </div>


        <Ibottom></Ibottom>
    </div>

</template>

<script>
    import Ibottom from "../components/Ibottom";
    import Top from "../components/Top";

    export default {
        name: "Seek",
        components: {Top, Ibottom},
        data() {
            return {
                sms:"",
                history:[],
                show:"",
                msg:true,
                wu:false,
            }
        },
        created() {
            this.history=JSON.parse(localStorage.SeekHistory);
            this.history=Array.from(new Set(this.history));
    },
        methods: {
            get(v,l) {
                if (l=='l'){
                    this.sms=v
                };
              this.history.push(this.sms);
              localStorage.SeekHistory=JSON.stringify(this.history);
              this.axios.get("https://elm.cangdu.org/v4/restaurants?geohash=31.22967,121.4762&keyword="+this.sms).then(data=>{
                  console.log(data.data)
                  this.show=data.data;
                  if (data.data.length==0){
                      this.wu=true;
                  }else {
                      this.wu=false;
                  }
              }).catch(err=>{
                  console.log(err);
              })
                this.msg=false;
            },
            delete1(i){
                this.history.splice(i,1)
                localStorage.SeekHistory=JSON.stringify(this.history);
            },
          shop(v){
            this.$router.push({path:"/shopdetail",query:{id:v.id}})
          }
        },
    }
</script>

<style scoped>
    .content{
        font-size: 20px;
    }

    .p1{
        font-size: .6rem;
        line-height: 2rem;
        text-indent: .5rem;
        font-weight: 700;
        color: #666;
    }
.span{
    float: right;
    /*color: #666666;*/
    /*font-size: 30px;*/
}
    .lishi{
        height: 45px;
        line-height: 45px;
        padding-left: 10px;
        padding-right: 10px;
        background-color: #fff;
        border-bottom: .025rem solid #e4e4e4;
        /*font: .7rem/2rem Microsoft YaHei;*/

    }
    .shop-root-book {
        display: flex;
        /*margin-bottom: 10px;*/
        background-color: white;
        border-bottom: aliceblue 1px solid;
        justify-content: space-between;
        padding: 5px;
        color: #333;
    }
    .shop-left{
        /* width: 25%; */
    }
    .shop-right{
        width: 85%;
    }
    .shop-left img {
        width: 2.7rem;
        height: 2.7rem;
        display: block;
        margin-right: 0.4rem;
    }
    .shop-right span,.shop-right h4{
        display: inline-block;
    }
    /*.shop-right-one,.shop-right-two,.shop-right-shtte{*/
    /*   margin: 0;*/
    /*}*/
    .shop-right-one h4{

        color: #333;
        padding-top: .01rem;
        font: 10px PingFangSC-Regular;
        font-weight: 700;
    }

    .shop-right-two span{

        font-size: .4rem;
        color: #666;
    }

    .shop-right-shtte span{
        font-size: 4px;
    }
    .wu{
        margin: 0 auto;
        font: 16px Microsoft YaHei;
        color: #333;
        background-color: #fff;
        text-align: center;
        margin-top: .125rem;
        height: 60px;
        line-height: 60px;
    }
    #LS{
        display: inline-block;
        width: 90%;
        /*background-color: #3190e8;*/
    }

    .content {
        font-size: 20px;
        text-align: center;
        /*background-color: #ffd930;*/
    }

    /deep/.van-field__control{
        background-color: #f2f2f2;
        height: 30px;
        border-radius: 4px;
        padding-left: 10px;
    }
    /deep/.van-button--small{
        width: 70px;
    }
</style>
<style>


</style>